<template>
    <div class="container-fluid" v-show='visible'>
        <!-- <div id="loading">
                <div id="loading-center">
                    <div id="loading-center-absolute">
                        <div class="object" id="object_one"></div>
                        <div class="object" id="object_two"></div>
                        <div class="object" id="object_three"></div>
                        <div class="object" id="object_four"></div>
                        <div class="object" id="object_five"></div>
                        <div class="object" id="object_six"></div>
                        <div class="object" id="object_seven"></div>
                        <div class="object" id="object_eight"></div>
                        <div class="object" id="object_big"></div>
                    </div>
                </div>
            </div> -->
        <div id="loading">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div class="sk-circle">
                        <div class="sk-circle1 sk-child"></div>
                        <div class="sk-circle2 sk-child"></div>
                        <div class="sk-circle3 sk-child"></div>
                        <div class="sk-circle4 sk-child"></div>
                        <div class="sk-circle5 sk-child"></div>
                        <div class="sk-circle6 sk-child"></div>
                        <div class="sk-circle7 sk-child"></div>
                        <div class="sk-circle8 sk-child"></div>
                        <div class="sk-circle9 sk-child"></div>
                        <div class="sk-circle10 sk-child"></div>
                        <div class="sk-circle11 sk-child"></div>
                        <div class="sk-circle12 sk-child"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "loading",
        data() {
            return {
                visible: false
            };
        },
        mounted: function() {}
    };
</script>

<style scoped>
    #loading {
        background-color: transparent;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 10000;
        margin-top: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #loading-center {
        width: 100%;
        height: 100%;
        position: relative;
    }
    #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 12.5rem;
        width: 12.5rem;
        margin-top: -6.25rem;
        margin-left: -6.25rem;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        cursor: pointer;
    }
    .object {
        width: 2rem;
        height: 2rem;
        background-color: #247d7d;
        position: absolute;
        left: 5.417rem;
        top: 5.417rem;
        -moz-border-radius: 50% 50% 50% 50%;
        -webkit-border-radius: 50% 50% 50% 50%;
        border-radius: 50% 50% 50% 50%;
    }
    .object:nth-child(2n + 0) {
        margin-right: 0;
    }
    #object_one {
        -webkit-animation: object_one 2s infinite;
        animation: object_one 2s infinite;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }
    #object_two {
        -webkit-animation: object_two 2s infinite;
        animation: object_two 2s infinite;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
    #object_three {
        -webkit-animation: object_three 2s infinite;
        animation: object_three 2s infinite;
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }
    #object_four {
        -webkit-animation: object_four 2s infinite;
        animation: object_four 2s infinite;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
    #object_five {
        -webkit-animation: object_five 2s infinite;
        animation: object_five 2s infinite;
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }
    #object_six {
        -webkit-animation: object_six 2s infinite;
        animation: object_six 2s infinite;
        -webkit-animation-delay: 0.7s;
        animation-delay: 0.7s;
    }
    #object_seven {
        -webkit-animation: object_seven 2s infinite;
        animation: object_seven 2s infinite;
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
    }
    #object_eight {
        -webkit-animation: object_eight 2s infinite;
        animation: object_eight 2s infinite;
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }
    #object_big {
        position: absolute;
        width: 50px;
        height: 50px;
        left: 50px;
        top: 50px;
        -webkit-animation: object_big 2s infinite;
        animation: object_big 2s infinite;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
    @-webkit-keyframes object_big {
        50% {
            -webkit-transform: scale(0.5);
        }
    }
    @keyframes object_big {
        50% {
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
        }
    }
    @-webkit-keyframes object_one {
        50% {
            -webkit-transform: translate(-65px, -65px);
        }
    }
    @keyframes object_one {
        50% {
            transform: translate(-65px, -65px);
            -webkit-transform: translate(-65px, -65px);
        }
    }
    @-webkit-keyframes object_two {
        50% {
            -webkit-transform: translate(0, -65px);
        }
    }
    @keyframes object_two {
        50% {
            transform: translate(0, -65px);
            -webkit-transform: translate(0, -65px);
        }
    }
    @-webkit-keyframes object_three {
        50% {
            -webkit-transform: translate(65px, -65px);
        }
    }
    @keyframes object_three {
        50% {
            transform: translate(65px, -65px);
            -webkit-transform: translate(65px, -65px);
        }
    }
    @-webkit-keyframes object_four {
        50% {
            -webkit-transform: translate(65px, 0);
        }
    }
    @keyframes object_four {
        50% {
            transform: translate(65px, 0);
            -webkit-transform: translate(65px, 0);
        }
    }
    @-webkit-keyframes object_five {
        50% {
            -webkit-transform: translate(65px, 65px);
        }
    }
    @keyframes object_five {
        50% {
            transform: translate(65px, 65px);
            -webkit-transform: translate(65px, 65px);
        }
    }
    @-webkit-keyframes object_six {
        50% {
            -webkit-transform: translate(0, 65px);
        }
    }
    @keyframes object_six {
        50% {
            transform: translate(0, 65px);
            -webkit-transform: translate(0, 65px);
        }
    }
    @-webkit-keyframes object_seven {
        50% {
            -webkit-transform: translate(-65px, 65px);
        }
    }
    @keyframes object_seven {
        50% {
            transform: translate(-65px, 65px);
            -webkit-transform: translate(-65px, 65px);
        }
    }
    @-webkit-keyframes object_eight {
        50% {
            -webkit-transform: translate(-65px, 0);
        }
    }
    @keyframes object_eight {
        50% {
            transform: translate(-65px, 0);
            -webkit-transform: translate(-65px, 0);
        }
    }
    /*  */
    .sk-circle {
        margin: 40px auto;
        width: 80px;
        height: 80px;
        position: relative;
    }
    .sk-circle .sk-child {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .sk-circle .sk-child:before {
        content: '';
        display: block;
        margin: 0 auto;
        width: 15%;
        height: 15%;
        background-color: #333;
        border-radius: 100%;
        -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
        animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    }
    .sk-circle .sk-circle2 {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    .sk-circle .sk-circle3 {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    .sk-circle .sk-circle4 {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .sk-circle .sk-circle5 {
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    .sk-circle .sk-circle6 {
        -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        transform: rotate(150deg);
    }
    .sk-circle .sk-circle7 {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .sk-circle .sk-circle8 {
        -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
        transform: rotate(210deg);
    }
    .sk-circle .sk-circle9 {
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    .sk-circle .sk-circle10 {
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    .sk-circle .sk-circle11 {
        -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
        transform: rotate(300deg);
    }
    .sk-circle .sk-circle12 {
        -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
        transform: rotate(330deg);
    }
    .sk-circle .sk-circle2:before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    .sk-circle .sk-circle3:before {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }
    .sk-circle .sk-circle4:before {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    .sk-circle .sk-circle5:before {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
    .sk-circle .sk-circle6:before {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }
    .sk-circle .sk-circle7:before {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }
    .sk-circle .sk-circle8:before {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }
    .sk-circle .sk-circle9:before {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }
    .sk-circle .sk-circle10:before {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }
    .sk-circle .sk-circle11:before {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }
    .sk-circle .sk-circle12:before {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }
    @-webkit-keyframes sk-circleBounceDelay {
        0%,
        80%,
        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    @keyframes sk-circleBounceDelay {
        0%,
        80%,
        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
</style>
